<template>
  <div class="workflow">
    <div class="workflow-title-container">
      <div class="workflow-falls">
        <div class="workflow-title">线索受理</div>
      </div>
      <div class="workflow-falls">
        <div class="workflow-title">线索处理</div>
      </div>
      <div class="workflow-falls">
        <div class="workflow-title">线索办结</div>
      </div>
      <div class="workflow-falls">
        <div class="workflow-title">审查调查</div>
      </div>
      <div class="workflow-falls">
        <div class="workflow-title">移送审理</div>
      </div>
      <div class="workflow-falls">
        <div class="workflow-title">案件审结</div>
      </div>
      <div class="workflow-falls">
        <div class="workflow-title">案件结案</div>
      </div>
    </div>
    <div class="workflow-step-container">
      <div class="workflow-falls">
        <div :class="'workflow-step ' + (clue.status !== undefined ? 'workflow-step-finished' : 'workflow-step-wait')">线索受理</div>
        <div :class="'line-tail ' + (clue.status !== undefined ? 'line-active' : 'line-inactive')"></div>
      </div>
      <div class="workflow-flex">
        <div class="workflow-divider-falls">
          <div :class="'workflow-step-divider ' + (clue.status > 0 && clue.disposalWay < 2 ? 'line-active' : 'line-inactive')"></div>
          <div :class="'workflow-step-divider ' + (clue.status > 0 && clue.disposalWay < 2 ? 'line-active' : 'line-inactive')"></div>
          <div :class="'workflow-step-divider ' + (clue.status > 0 && clue.disposalWay < 3 ? 'line-active' : 'line-inactive')"></div>
          <div :class="'workflow-step-divider ' + (clue.status > 0 && clue.disposalWay > 2 ? 'line-active' : 'line-inactive')"></div>
          <div :class="'workflow-step-divider ' + (clue.status > 0 && clue.disposalWay > 3 ? 'line-active' : 'line-inactive')"></div>
          <div :class="'workflow-step-divider ' + (clue.status > 0 && clue.disposalWay > 3 ? 'line-active' : 'line-inactive')"></div>
        </div>
        <div class="workflow-falls">
          <div class="workflow-flex">
            <div :class="'line-ahead ' + (clue.status > 0 && clue.disposalWay === 1 ? 'line-active' : 'line-inactive')"></div>
            <div :class="'workflow-step ' + getClueDisposalClass(1)">初步核实</div>
            <div :class="'line-tail ' + (clue.status > 0 && clue.disposalWay === 1 ? 'line-active' : 'line-inactive')"></div>
          </div>
          <div class="workflow-flex">
            <div :class="'line-ahead ' + (clue.status > 0 && clue.disposalWay === 2 ? 'line-active' : 'line-inactive')"></div>
            <div :class="'workflow-step ' + getClueDisposalClass(2)">谈话函询</div>
            <div :class="'line-tail ' + (clue.status > 0 && clue.disposalWay === 2 ? 'line-active' : 'line-inactive')"></div>
          </div>
          <div class="workflow-flex">
            <div :class="'line-ahead ' + (clue.status > 0 && clue.disposalWay === 3 ? 'line-active' : 'line-inactive')"></div>
            <div :class="'workflow-step ' + getClueDisposalClass(3)">了结</div>
            <div :class="'line-tail ' + (clue.status > 0 && clue.disposalWay === 3 ? 'line-active' : 'line-inactive')"></div>
          </div>
          <div class="workflow-flex">
            <div :class="'line-ahead ' + (clue.status > 0 && clue.disposalWay === 4 ? 'line-active' : 'line-inactive')"></div>
            <div :class="'workflow-step ' + getClueDisposalClass(4)">暂存</div>
            <div :class="'line-tail ' + (clue.status > 0 && clue.disposalWay === 4 ? 'line-active' : 'line-inactive')"></div>
          </div>
        </div>
        <div class="workflow-divider-falls">
          <div class="workflow-divider-falls">
            <div :class="'workflow-step-divider ' + (clue.status === 2 && clue.disposalWay < 2 ? 'line-active' : 'line-inactive')"></div>
            <div :class="'workflow-step-divider ' + (clue.status === 2 && clue.disposalWay < 2 ? 'line-active' : 'line-inactive')"></div>
            <div :class="'workflow-step-divider ' + (clue.status === 2 && ((clue.disposalWay < 3 && clue.conclusion > 1) || (clue.disposalWay > 2 && clue.conclusion < 2)) ? 'line-active' : 'line-inactive')"></div>
            <div :class="'workflow-step-divider ' + (clue.status === 2 && ((clue.disposalWay < 3 && clue.conclusion > 1) || (clue.disposalWay > 2 && clue.conclusion < 2)) ? 'line-active' : 'line-inactive')"></div>
            <div :class="'workflow-step-divider ' + (clue.status === 2 && clue.disposalWay > 3 ? 'line-active' : 'line-inactive')"></div>
            <div :class="'workflow-step-divider ' + (clue.status === 2 && clue.disposalWay > 3 ? 'line-active' : 'line-inactive')"></div>
          </div>
        </div>
      </div>
      <div class="workflow-flex">
        <div class="workflow-falls">
          <div class="workflow-flex">
            <div :class="'line-ahead ' + (clue.conclusion === 1 ? 'line-active' : 'line-inactive')"></div>
            <div :class="'workflow-step ' + getClueConclusionClass(1)">立案</div>
            <div :class="'line-tail ' + (clue.conclusion === 1 ? 'line-active' : 'line-inactive')"></div>
          </div>
          <div class="workflow-flex">
            <div :class="'line-ahead ' + (clue.conclusion === 2 ? 'line-active' : 'line-inactive')"></div>
            <div :class="'workflow-step ' + getClueConclusionClass(2)">了结</div>
            <div :class="'line-tail ' + (clue.conclusion === 2 ? 'line-active' : 'line-inactive')"></div>
          </div>
        </div>
        <div class="workflow-divider-falls">
          <div :class="'workflow-step-divider ' + (clue.conclusion === 1 ? 'line-active' : 'line-inactive')"></div>
          <div :class="'workflow-step-divider ' + (clue.conclusion === 2 ? 'line-active' : 'line-inactive')"></div>
        </div>
      </div>
      <div class="workflow-falls">
        <div class="workflow-flex">
          <div :class="'line-ahead ' + (clue.status === 2 ? 'line-active' : 'line-inactive')"></div>
          <!-- 数据存在就代表此环节已经完成-->
          <div class="workflow-step workflow-step-finished">审查调查</div>
          <div class="line-tail line-active"></div>
        </div>
      </div>
      <div class="workflow-falls">
        <div class="workflow-flex">
          <div class="line-ahead line-active"></div>
          <div :class="'workflow-step ' + (filing.status > 0 ? 'workflow-step-finished' : 'workflow-step-current')">移送审理</div>
          <div :class="'line-tail ' + (filing.status > 0 ? 'line-active' : 'line-inactive')"></div>
        </div>
      </div>
      <div class="workflow-falls">
        <div class="workflow-flex">
          <div :class="'line-ahead ' + (filing.status > 0 ? 'line-active' : 'line-inactive')"></div>
          <div :class="'workflow-step ' + (filing.status > 1 ? 'workflow-step-finished' : (filing.status === 1 ? 'workflow-step-current' : 'workflow-step-wait'))">案件审结</div>
          <div :class="'line-tail ' + (filing.status > 1 ? 'line-active' : 'line-inactive')"></div>
        </div>
      </div>
      <div class="workflow-falls">
        <div class="workflow-flex">
          <div :class="'line-ahead ' + (filing.status > 1 ? 'line-active' : 'line-inactive')"></div>
          <div :class="'workflow-step ' + (filing.status > 2 ? 'workflow-step-finished' : (filing.status === 2 ? 'workflow-step-current' : 'workflow-step-wait'))">案件结案</div>
        </div>
      </div>
    </div>
    <div class="workflow-status-container">
      <div class="workflow-falls">
        <div class="workflow-status">{{ clue.receiptTime || '-' }}</div>
      </div>
      <div class="workflow-falls">
        <div class="workflow-status">{{ clue.status > 0 ? (clue.disposalTime || '-') : (clue.status === 0 ? ('处理中:' + (clue.disposalDays || 1) + '天') : '-' ) }}</div>
      </div>
      <div class="workflow-falls">
        <div class="workflow-status">{{ clue.status > 1 ? (clue.closureTime || '-') : (clue.status === 1 ? ('处理中:' + (clue.closureDays || 1) + '天') : '-' ) }}</div>
      </div>
      <div class="workflow-falls">
        <div class="workflow-status">{{ filing.filingTime || '-' }}</div>
      </div>
      <div class="workflow-falls">
        <div class="workflow-status">{{ filing.status > 0 ? (filing.transferTime || '-') : (filing.status === 0 ? ('处理中:' + (filing.transferDays || 1) + '天') : '-' ) }}</div>
      </div>
      <div class="workflow-falls">
        <div class="workflow-status">{{ filing.status > 1 ? (filing.concludeTime || '-') : (filing.status === 1 ? ('处理中:' + (filing.concludeDays || 1) + '天') : '-' ) }}</div>
      </div>
      <div class="workflow-falls">
        <div class="workflow-status">{{ filing.status > 2 ? (filing.closureTime || '-') : (filing.status === 2 ? ('处理中:' + (filing.closureDays || 1) + '天') : '-' ) }}</div>
      </div>
    </div>
    <div class="legend-container">
      <div class="legend workflow-step-wait">未开始</div>
      <div class="legend workflow-step-current">处理中</div>
      <div class="legend workflow-step-bypass">未选择</div>
      <div class="legend workflow-step-finished">已完成</div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    clue: {
      type: Object,
      default() {
        return {
          receiptTime: undefined,
          disposalTime: undefined,
          disposalDays: undefined,
          disposalWay: 1,
          closureTime: undefined,
          closureDays: 0,
          conclusion: 1,
          status: -1
        }
      }
    },
    filing: {
      type: Object,
      default() {
        return {
          filingTime: undefined,
          transferTime: undefined,
          transferDays: 0,
          concludeTime: undefined,
          concludeDays: 0,
          closureTime: undefined,
          closureDays: 0,
          status: 0
        }
      }
    }
  },
  methods: {
    getClueDisposalClass(value) {
      if (this.clue === undefined || this.clue.status === undefined) {
        return 'workflow-step-wait'
      } else if (this.clue.status === 0) {
        return 'workflow-step-current'
      } else if (this.clue.disposalWay === value) {
        return 'workflow-step-finished'
      } else {
        return 'workflow-step-bypass'
      }
    },
    getClueConclusionClass(value) {
      if (this.clue === undefined || this.clue.status === undefined || this.clue.status === 0) {
        return 'workflow-step-wait'
      } else if (this.clue.status === 1) {
        return 'workflow-step-current'
      } else if (this.clue.conclusion === value) {
        return 'workflow-step-finished'
      } else {
        return 'workflow-step-bypass'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  // 流程图样式
  .workflow {
    width: 860px;
    height: 360px;
  }
  .workflow-falls {
    position: relative;
    width: 120px;
    display: flex;
    flex-direction: column; /* 设置子元素垂直排列 */
    justify-content: center;
    align-items: center; /* 在主轴方向上居中对齐 */
  }
  .workflow-flex {
    position: relative;
    width: 120px;
    display: flex;
    justify-content: center;
    align-items: center; /* 在主轴方向上居中对齐 */
  }
  .workflow-title-container {
    display: flex;
    width: 100%;
    height: 30px;
    margin: 5px;
  }
  .workflow-title {
    position: relative;
    width: 120px;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
  }
  .workflow-step-container {
    width: 100%;
    height: 250px;
    margin: 5px;
    display: flex;
    align-items: center;
  }
  .workflow-step {
    position: relative;
    width: 100px;
    height: 50px;
    margin: 5px;
    border: 1px solid #ccc;
    text-align: center;
    line-height: 50px;
  }
  .workflow-step-finished {
    background-color: darkseagreen;
  }
  .workflow-step-bypass {
    background-color: white;
  }
  .workflow-step-current {
    background-color: lightsteelblue;
  }
  .workflow-step-wait {
    background-color: lightgray;
  }
  .workflow-divider-falls {
    position: relative;
    display: flex;
    flex-direction: column; /* 设置子元素垂直排列 */
    justify-content: center;
    align-items: center; /* 在主轴方向上居中对齐 */
  }
  .workflow-step-divider {
    position: relative;
    width: 1px;
    height: 30px;
  }
  .workflow-status-container {
    width: 100%;
    height: 30px;
    margin: 5px;
    display: flex;
    align-items: center; /* 在主轴方向上居中对齐 */
  }
  .workflow-status {
    position: relative;
    width: 120px;
    text-align: center;
    font-size: 16px;
  }
  .line-ahead {
    position: absolute;
    top: 50%; /* 将线段的起点定位在容器的垂直中心 */
    left: 0; /* 将线段的起点定位在容器的左侧 */
    transform: translateY(-50%); /* 将线段的起点向上偏移自身高度的一半，使其与容器的垂直中心对齐 */
    width: 10px;
    height: 1px;
  }
  .line-active {
    background-color: orange;
  }
  .line-inactive {
    background-color: #ccc;
  }
  .line-tail {
    position: absolute;
    top: 50%; /* 将线段的起点定位在容器的垂直中心 */
    right: 0; /* 将线段的起点定位在容器的右侧 */
    transform: translateY(-50%); /* 将线段的起点向上偏移自身高度的一半，使其与容器的垂直中心对齐 */
    width: 10px;
    height: 1px;
  }
  .legend-container {
    display: flex;
    position: absolute; /* 内部 div 设置为绝对定位 */
    right: 0;
    width: 300px;
    height: 30px;
    margin: 5px 10px;
    text-align: right;
  }
  .legend {
    display: flex;
    width: 50px;
    height: 30px;
    margin: 0 10px;
    align-items: center;
    justify-content: center;
    border: 1px solid #ccc;
  }
</style>
